import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'umi'
import { withI18n } from '@lingui/react'
import {
  Row,
  Card,
  Form,
  Input,
  Button,
  Col,
  Table,
  Modal,
  message,
} from 'antd'
import Pagination from '@/utils/Pagination'
import { layoutlist, success } from '@/utils/helper'
import styles from './index.less'
import { post, get, Delete } from '@/services/https'
import { Unite } from '@/utils/Unite'
const confirm = Modal.confirm
@withI18n()
class Command extends React.Component {
  formRef = React.createRef()
  state = {
    keys: [],
    setIsModalVisible: false, //弹框
    from: {},
    total: 0, //总页数
    current: 1,
    pageSize: 10,
    user_name: '',
    dataSource: [],
    selectId: [],
  }

  //初始化时自调用一次，用于请求借口数据
  componentDidMount() {
    this.onChangeCurPageOrPageSize(1, 10)
  }
  onAddgt = () => {
    this.props.history.push('/dashboard/ClassList/0')
  }
  handleMenuClick = (status) => {}
  getData = (current, pageSize) => {
    let data = {
      ...this.state.from,
      page_index: current,
      page_size: pageSize,
    }
    post('class/list', data).then((res) => {
      this.setState({ dataSource: res.data, total: res.size })
    })
  }

  handleDel = () => {
    post('class/delete', this.state.selectId).then((res) => {
      const { location, i18n } = this.props
      if (res.code === 0) {
        message.success(i18n.t`Deleds`)
        this.onChangeCurPageOrPageSize(1, 10)
      } else {
        message.error(res.info)
      }
    })
  }
  searchBtn = (e) => {
    e && e.preventDefault()
    this.onChangeCurPageOrPageSize(1, this.state.pageSize)
  }

  handleReset = () => {
    this.setState({ from: {} })
    this.formRef.current.resetFields()
    let that = this
    setTimeout(function () {
      that.getData(1, 10)
    }, 500) //延时10秒
  }
  onChangeCurPageOrPageSize = (current, pageSize) => {
    this.setState(
      () => ({ current, pageSize }),
      () => {
        this.getData(current, pageSize)
      }
    )
  }
  showConfirm = () => {
    let that = this
    const { location, i18n } = this.props
    confirm({
      title: i18n.t`Are-delete`,
      content: i18n.t`reversible`,
      onOk() {
        that.handleDel()
      },
    })
  }
  handsearch = (values) => {
    this.setState({ from: values })
    this.getData(1, 10)
  }
  handleChange = (event) => {
    this.setState({ user_name: event.target.value })
  }
  render() {
    const { i18n } = this.props
    const { dataSource, selectId, account_type } = this.state
    const columns = [
      {
        title: '班级名称',
        dataIndex: 'class_name',
        key: 'class_name',
        width: 170,
        align: 'center',
        render: (text, record) => {
          return <Link to={`/dashboard/ClassList/${record.id}`}>{text}</Link>
        },
      },
      {
        title: '学生人数',
        width: 80,
        dataIndex: 'student_num',
        key: 'student_num',
        align: 'center',
      },
      {
        title: '教师人数',
        width: 80,
        dataIndex: 'teacher_num',
        key: 'teacher_num',
        align: 'center',
      },
      {
        title: i18n.t`Account-describe`,
        width: 170,
        dataIndex: 'class_desc',
        key: 'class_desc',
        align: 'center',
      },
    ]

    let rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({ selectId: selectedRowKeys })
      },
      getCheckboxProps: (record) => ({}),
    }
    return (
      <div className={styles.ct}>
        <div className={styles.ban}>
          <div className={styles.tetli}>班级列表</div>
          <div
            style={{
              width: '60px',
              height: '6px',
              background:
                'linear-gradient( 270deg, rgba(37,111,254,0) 0%, #256FFE 100%)',
            }}
          ></div>
          <Form
            {...layoutlist}
            ref={this.formRef}
            onFinish={this.handsearch}
            className={styles.forms}
          >
            <div>
              <Form.Item className={styles.antBut} label="" name="class_name">
                <Input placeholder="搜索班级名称" style={{ width: '300px' }} />
              </Form.Item>
            </div>
            <div>
              <Button type="primary" htmlType="submit" className={styles.Po_Le}>
                {i18n.t`Search`}
              </Button>
              <Button
                className={styles.Po_Le}
                style={{
                  marginLeft: '12px',
                  boxShadow: '0px 1px 6px 0px rgba(113,142,186,0.2)',
                }}
                onClick={this.handleReset}
              >
                {i18n.t`Reset`}
              </Button>
            </div>
          </Form>
          <div className="add">
            <Button
              type="primary"
              onClick={this.onAddgt}
              style={{ boxShadow: '0px 1px 6px 0px rgba(113,142,186,0.2)' }}
            >
              {i18n.t`add`}
            </Button>
            <Button
              type="default"
              onClick={this.showConfirm}
              style={{
                marginLeft: '12px',
                boxShadow: '0px 1px 6px 0px rgba(113,142,186,0.2)',
              }}
              disabled={selectId.length > 0 ? false : true}
            >
              {i18n.t`Delent`}
            </Button>
          </div>
        </div>
        <Row>
          <Table
            // rowClassName={(record, i) => (i % 2 === 1 ? 'even' : 'odd')}1
            rowKey="id"
            rowSelection={rowSelection}
            style={{
              width: '100%',
              boxShadow: '0px -4px 8px 0px rgba(0,57,147,0.08)',
            }}
            bordered
            dataSource={dataSource}
            columns={columns}
            pagination={false}
          />
          <Pagination
            current={this.state.current}
            pageSize={this.state.pageSize}
            total={this.state.total}
            handleChange={this.onChangeCurPageOrPageSize} //当前页及条数改变都会从子组件触发此方法，用于传递页码和条数
            pageSizeOptions={['10']} // 针对不同的组件需求传递每次多少条，不传已在分页组件写默认值了
          ></Pagination>
        </Row>
      </div>
    )
  }
}
Command.propTypes = {
  post: PropTypes.object,
  // loading: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}
export default Command
